<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uuQuery.js - DEMO</title>
<style type="text/css">@import url(./README.css);</style>
<script src="uuQuery.js"></script>
<script>

// === uuImage ===
// depend: none
/*
uuImage.load(url, callback)
uuImage.getActualDimension(image) - return { w, h }
 */

(function() {
var _image, // inner namespace
    _ie = document.uniqueID;

_image = {
  // uuImage.getActualDimension
  // http://d.hatena.ne.jp/uupaa/20090602/1243933843
  getActualDimension: function(image) { // @param HTMLImageElement
                                        // @return Hash: { w, h }
    var run, mem, w, h, key = "actual";

    // for Firefox, Safari, Chrome
    if ("naturalWidth" in image) {
      return { w: image.naturalWidth, h: image.naturalHeight };
    }

    if ("src" in image) { // HTMLImageElement
      if (image[key] && image[key].src === image.src) {
        return image[key];
      }
      if (_ie) { // for IE
        run = image.runtimeStyle;
        mem = { w: run.width, h: run.height }; // keep runtimeStyle
        run.width  = "auto"; // override
        run.height = "auto";
        w = image.width;
        h = image.height;
        run.width  = mem.w; // restore
        run.height = mem.h;
      } else { // for Opera
        mem = { w: image.width, h: image.height }; // keep current style
        image.removeAttribute("width");
        image.removeAttribute("height");
        w = image.width;
        h = image.height;
        image.width  = mem.w; // restore
        image.height = mem.h;
      }
      return image[key] = { w: w, h: h, src: image.src }; // bond
    }
    // HTMLCanvasElement
    return { w: image.width, h: image.height };
  }
};

// --- initialize ---

// --- export ---
window.uuImage = _image;

})();

function zoom(img) {
  var dim = uuImage.getActualDimension(img);
  if (img.width == dim.w) {
    img.width  = img.restore.w;
    img.height = img.restore.h;
  } else {
    img.restore = { w: img.width, h: img.height }; // bond
    img.width  = dim.w;
    img.height = dim.h;
  }
}
function fold(me, elm) {
  if (elm.style.display === "none") {
    elm.style.display = "block";
    me.innerText = "[-] SCREEN SHOT";
    me.textContent = "[-] SCREEN SHOT";
  } else {
    elm.style.display = "none";
    me.innerText = "[+] SCREEN SHOT";
    me.textContent = "[+] SCREEN SHOT";
  }
}
</script>
</head>
<body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">HOME</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">CLASS</a>
   | <a href="./CHANGELOG.htm">CHANGE LOG</a>
   | <a href="./DONATE.htm">DONATE</a>
   | <a href="./LICENSE.htm">LICENSE</a>
   |
</p>
<hr />
<h2>Speed and Validity</h2>
<p><span lang="ja">uuQuery.js は、CSS 3の仕様に準拠しつつ高速性を実現しています。
    <br />[RUN] をクリックするとテストページにジャンプします。テストが途中で止まる場合は何度かリロードしてみてください。
    <br />[+ SCREEN SHOT] をクリックするとテスト結果の画像をご覧になれます。画像にある uupaa-selector-2.0.2.js は uuQuery.js(ver 1.0)と同じものです。
<p><span lang="ja">uuQuery.js は Firefox3.5, Safari3, Google Chrome, Opera10, IE8 で、
    document.querySelectorAll() メソッドを利用します。</span></p>

<ul>
  <li>Syntax error - 構文エラーの確認
      <a href="http://pigs.sourceforge.jp/uuQuery.js/speed/index.php?menu=syntax1" class="run">RUN</a>
      <a href="javascript:void 0" onclick="fold(this, uuQuery('#syntax1')[0])" class="run">[+] SCREEN SHOT</a>
      <div id="syntax1" style="display: none">
        <img src="img/ie6syntax1.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/ie7syntax1.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/ie8syntax1.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/fx35bsyntax1.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/chrome3bsyntax1.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/safari4bsyntax1.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/opera10bsyntax1.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/opera927syntax1.png" width="100" alt="" onclick="zoom(this)" />
      </div>

      <p><span lang="ja">不正なクエリに対して、全ての項目でエラーが発生する(ライブラリによっては検索結果がゼロになる)ことを期待したテストです。
          このテスト結果から、各ブラウザが実装している querySelectorAll にも、微妙な解釈の違いやバグが見られます。
          <br /><b>[ブラウザ要因の制限事項]</b> uuQuery.js は querySelectorAll が利用可能な場合は、querySelectorAll の実行結果をそのまま返すため、
              以下のケースで正しい結果が得られないことが判っています。:not の利用には注意が必要です。</span></p>
          </span></p>
      <table>
      <tr><th>Browser</th><th>querySelectorAll(<i>expression</i>)</th><th>Result</th></tr>
      <tr><th>Firefox3.5</th><td><i>:not()</i></td><td>エラーにならない</td></tr>
      <tr><th>Google Chrome3β</th><td><i>:not(div.class)</i></td><td>エラーにならない</td></tr>
      <tr><th>Safari4</th><td><i>:not(div.class)</i></td><td>エラーにならない</td></tr>
      </table>
  </li>
  <li>Correspondence - 整合性の確認
      <a href="http://pigs.sourceforge.jp/uuQuery.js/speed/index.php?menu=syntax2" class="run">RUN</a>
      <a href="javascript:void 0" onclick="fold(this, uuQuery('#syntax2')[0])" class="run">[+] SCREEN SHOT</a>
      <div id="syntax2" style="display: none">
        <img src="img/ie6syntax2.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/chrome3bsyntax2.png" width="100" alt="" onclick="zoom(this)" />
      </div>

      <p lang="ja">JavaScript で書かれた querySelectorAll 相当の機能が、
        ブラウザがネイティブに実装する querySelectorAll と整合性が取れているか確認できます。
      </p>
  </li>
  <li>CSS Selector Speed - CSSセレクタの速度比較
      <a href="http://pigs.sourceforge.jp/uuQuery.js/speed/index.php" class="run">RUN</a>
<!--
      <a href="http://pigs.sourceforge.jp/uuQuery.js/speed/index.php?menu=debug" class="run">RUN</a>
 -->
      <a href="javascript:void 0" onclick="fold(this, uuQuery('#speed')[0])" class="run">[+] SCREEN SHOT</a>
      <div id="speed" style="display: none">
        <img src="img/ie6speed.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/ie7speed.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/ie8speed.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/fx35bspeed.png" width="100" alt="" onclick="zoom(this)" />
        <img src="img/opera961speed.png" width="100" alt="" onclick="zoom(this)" />
      </div>
      <p><span lang="ja">数字はあくまで参考程度にお考え下さい。</span></p>
  </li>
  <li>Class Selector Speed - クラスセレクタの速度比較
      <a href="http://pigs.sourceforge.jp/uuQuery.js/speed/index.php?menu=class" class="run">RUN</a>
      <a href="http://pigs.sourceforge.jp/uuQuery.js/speed/index.php?menu=class2" class="run">RUN(MULTI)</a>
      <a href="javascript:void 0" onclick="fold(this, uuQuery('#className')[0])" class="run">[+] SCREEN SHOT</a>

      <div id="className" style="display: none">
        <img src="img/classname.png" alt="" />
      </div>
      <p><span lang="ja">クラスセレクタは最も多用するセレクタです。
         このテストでは、各ライブラリが提供している最も効率的な方法で &lt;div class="example"&gt; や &lt;div class="example1 example2 example3"&gt; を検索します。
         <br />uuQuery.js では、包括的な <a href="CLASS.htm#uuQuery">uuQuery</a>() よりも <a href="CLASS.htm#uuQuery.className">uuQuery.className</a>() のほうが高速です。
         </span></p>
  </li>
</ul>

<hr />

<h2>Selectors</h2>
<p><span lang="ja">uuQuery.js をロードすると全機能が利用可能になります。
  <br />機能制限版の uuQuery.lite.js をロードした場合は、CSS3 セレクタと ★ 付きのセレクタのみ利用可能です。</span></p>

<h3>CSS3 Selectors - CSS3 セレクタ</h3>
<table>
<tr>
<td><a href="demo/nth-child.htm">:nth-child</a></td>
<td><a href="demo/hover.htm">:hover</a></td>
<td><a href="demo/focus.htm">:focus</a></td>
</tr>
</table>

<h3>uuQuery Extend Selectors - uuQuery 拡張セレクタ</h3>

<table>
<tr>
<td><a href="CLASS.htm#uuQueryExtend">Pseudo-class</a></td><td>
★ <a href="demo/contains.htm">:contains</a></td>
</tr>

<tr><td>Attribute selectors - <a href="CLASS.htm#uuQueryNotEqual">not equal operator</a></td>
      <td>★ <a href="demo/noteq.htm">E[ attr != value ]</a></td></tr>
<tr><td>Attribute selectors - <a href="CLASS.htm#uuQueryRegexp">regexp operator</a></td>
      <td>★ <a href="demo/regexp.htm">E[ attr /= "regexp" ]</a>
      <br />★ <a href="demo/regexp.htm">E[ attr /= "regexp"i ]</a></td></tr>
<tr><td><a href="CLASS.htm#uuQueryAccount">Account pseudo class</a></td>
      <td>★ <a href="demo/digit.htm">:digit</a>
      <br />★ <a href="demo/negative.htm">:negative</a></td></tr>
<tr><td><a href="CLASS.htm#uuQueryStyle">Computed style selectors</a></td>
      <td><a href="demo/style1.htm">E<b>{</b> prop : value <b>}</b></a>
      <br /><a href="demo/style1.htm">E<b>{</b> prop = value <b>}</b></a>
      <br /><a href="demo/style2.htm">E<b>{</b> prop != value <b>}</b></a>
      <br /><a href="demo/style3.htm">E<b>{</b> prop *= value <b>}</b></a>
      <br /><a href="demo/style3.htm">E<b>{</b> prop ^= value <b>}</b></a>
      <br /><a href="demo/style3.htm">E<b>{</b> prop $= value <b>}</b></a>

      <br /><a href="demo/style8.htm">E<b>{</b> prop /= "value" <b>}</b></a>
      <br /><a href="demo/style8.htm">E<b>{</b> prop /= "value"i <b>}</b></a>
      <br /><a href="demo/style9.htm">E<b>{</b> prop >= value <b>}</b></a>
      <br /><a href="demo/style9.htm">E<b>{</b> prop <= value <b>}</b></a>
      <br /><a href="demo/style11.htm">E<b>{</b> prop &= value <b>}</b></a>
      </td>
      </tr>
</table>

<h3>Security risk - セキュリティリスクを伴うセレクタ</h3>

<p><span lang="ja">:visited は、セキュリティ上の問題があるため、機能を無効にした状態でリリースしています。
  <br />リスクを正しく理解し、かつ :visited を利用する必要がある場合は、
  <br />uuQuery.js を読み込む前に、window.UUQUERY_ENABLE_VISITED = 1; を定義し、:visited を有効にしてください。</span></p>
<p><span lang="ja">
  :visited が無効な状態では、未訪問, 訪問済みを区別しないため、 <b>:link は全てのリンクと一致</b>します。
</span></p>

<table>
<tr>
<td>:visited 無効</td><td>★ <a href="demo/xlink.htm">:link</a><br />★ <a href="demo/xvisited.htm">:visited</a></td>
</tr><tr>
<td>:visited 有効</td><td>★ <a href="demo/link.htm">:link</a><br />★ <a href="demo/visited.htm">:visited</a></td>
</tr>
</table>

<h3>jQuery Extend Selectors - jQuery 拡張セレクタ</h3>
<table>
<tr>
<td><a href="demo/plus/first.htm">:first</a></td>
<td><a href="demo/plus/last.htm">:last</a></td>
<td><a href="demo/plus/even.htm">:even</a></td>
<td><a href="demo/plus/odd.htm">:odd</a></td>
<td><a href="demo/plus/eq.htm">:eq</a></td>
<td><a href="demo/plus/gt.htm">:gt</a></td>
<td><a href="demo/plus/lt.htm">:lt</a></td>
<td><a href="demo/plus/parent.htm">:parent</a></td>
<td><a href="demo/plus/header.htm">:header</a></td>
<td><a href="demo/plus/selected.htm">:selected</a></td>
</tr>
<tr>
<td><a href="demo/plus/input.htm">:input</a></td>
<td><a href="demo/plus/button.htm">:button</a></td>
<td><a href="demo/plus/text.htm">:text</a></td>
<td><a href="demo/plus/password.htm">:password</a></td>
<td><a href="demo/plus/radio.htm">:radio</a></td>
<td><a href="demo/plus/checkbox.htm">:checkbox</a></td>
<td><a href="demo/plus/submit.htm">:submit</a></td>
<td><a href="demo/plus/image.htm">:image</a></td>
<td><a href="demo/plus/reset.htm">:reset</a></td>
<td><a href="demo/plus/file.htm">:file</a></td>
</tr>
<tr>
<td><a href="demo/plus/hidden.htm">:hidden</a></td>
<td><a href="demo/plus/visible.htm">:visible</a></td>
</tr>
</table>

</body>
</html>

